<template>
  <div class="chat-room-container">
    <a-layout class="chat-room-box">
      <!-- 左侧菜单 -->
      <a-layout-sider width="60" class="chat-room-menu">
        <div class="menu-container">
          <div class="menu-top">
            <a-avatar
              size="large"
              style="margin-left: 15px; margin-top: 15px"
              :src="authStore.user?.avatar"
            >
            </a-avatar>
            <a-menu
              mode="inline"
              theme="light"
              v-model:selectedKeys="selectedKeys"
              @select="handleMenuSelect"
            >
              <a-menu-item v-for="(item, index) in menuItems" :key="index">
                <template #icon>
                  <component :is="item.icon" />
                </template>
                <template #title>{{ item.name }}</template>
              </a-menu-item>
            </a-menu>
          </div>
          <div class="menu-bottom">
            <a-menu mode="inline" theme="light">
              <a-menu-item key="setting">
                <template #icon>
                  <component :is="settingItem.icon" />
                </template>
                <template #title>{{ settingItem.name }}</template>
              </a-menu-item>
            </a-menu>
          </div>
        </div>
      </a-layout-sider>

      <!-- 查找好友对话框 -->
      <a-modal v-model:open="open" title="全局查找" @ok="handleOk">
        <template #footer>
          <a-button key="back" @click="handleCancel">返回</a-button>
          <!-- <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
            >添加</a-button
          > -->
        </template>
        <a-input-search
          v-model:value="searchUser"
          enter-button="查询"
          size="large"
          @search="searchUserInfo"
          placeholder="请输入用户名或手机号"
        />
        <!-- 用户信息卡片 -->
        <div class="contact-introduce">
          <a-card
            hoverable
            v-if="showCard"
            style="width: 300px"
            v-model:open="showCard"
          >
            <template #cover>
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            </template>
            <template #actions>
              <a-button
                v-if="showAddContactButton"
                type="primary"
                @click="showAddContact"
                >添加用户到联系人</a-button
              >
            </template>
            <a-card-meta :title="UserInfo.nickname" description="开心每一天哦~">
              <template #avatar>
                <a-avatar :src="UserInfo.avatar" />
              </template>
            </a-card-meta>
          </a-card>
        </div>
      </a-modal>

      <!-- 创建群聊对话框 -->
      <a-modal
        v-model:open="addGroupOpen"
        title="创建群聊"
        @ok="handleCreateGroup"
        width="600px"
      >
        <template #footer>
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleCreateGroup"
          >
            创建
          </a-button>
        </template>
        <a-form :model="createGroupForm" layout="vertical">
          <a-row :gutter="16">
            <!-- 左侧群聊信息表单 -->
            <a-col :span="12">
              <a-form-item label="群聊名称" required>
                <a-input
                  v-model:value="createGroupForm.name"
                  placeholder="请输入群聊名称"
                />
              </a-form-item>
              <a-form-item label="群聊描述">
                <a-textarea
                  v-model:value="createGroupForm.description"
                  placeholder="请输入群公告"
                  :rows="4"
                />
              </a-form-item>
              <a-form-item label="群聊公告">
                <a-textarea
                  v-model:value="createGroupForm.announcement"
                  placeholder="请输入群公告"
                  :rows="4"
                />
              </a-form-item>
            </a-col>
            <!-- 右侧联系人列表 -->
            <a-col :span="12">
              <div class="contact-select">
                <div class="contact-select-header">
                  <a-input-search
                    v-model:value="contactSearchText"
                    placeholder="搜索联系人"
                    @search="onSearchContact"
                  />
                </div>
                <div class="contact-select-list">
                  <a-checkbox-group v-model:value="selectedContacts">
                    <div
                      v-for="contact in filteredContacts"
                      :key="contact.friendId"
                      class="contact-item"
                    >
                      <a-checkbox :value="contact.friendId">
                        <a-space>
                          <a-avatar :size="32" :src="contact.avatar" />
                          <span>{{ contact.remark || contact.nickname }}</span>
                        </a-space>
                      </a-checkbox>
                    </div>
                  </a-checkbox-group>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <!-- 添加好友对话框 -->
      <a-modal
        v-model:open="openInfo"
        title="申请添加朋友"
        :confirm-loading="confirmLoading"
        @ok="handleSumbit"
      >
        <a-form :model="addContactForm">
          <a-form-item label="申请原因">
            <a-input
              v-model:value="addContactForm.applyReason"
              placeholder="请输入申请原因"
            />
          </a-form-item>
          <a-form-item label="备注名">
            <a-input
              v-model:value="addContactForm.remark"
              placeholder="请设置给他的备注"
            />
          </a-form-item>
          <a-form-item label="分组">
            <a-input
              v-model:value="addContactForm.category"
              placeholder="请设置分组"
            />
          </a-form-item>
          <a-form-item name="select" label="设置朋友权限" has-feedback>
            <a-select placeholder="请设置朋友的权限">
              <a-select-option value="chat">聊天、朋友圈等</a-select-option>
              <a-select-option value="onlyChat">仅聊天</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 中间列表区域 -->
      <a-layout-sider width="300" class="chat-room-list" ref="listContainer">
        <div class="list-header">
          <a-input-search
            v-model:value="searchText"
            :placeholder="getSearchPlaceholder"
            @change="handleSearchChange"
            style="width: 100%; margin-right: 10px"
          />
          <a-button
            :icon="h(currentIcon)"
            @click="handleAddButtonClick"
          ></a-button>
        </div>
        <div class="list-content">
          <a-list :data-source="filteredList">
            <template #renderItem="{ item, index }">
              <a-list-item
                class="chat-item"
                :class="{ active: activeChat === index }"
                @click="handleItemClick(item, index)"
                @contextmenu.prevent="handleContextMenu($event, item)"
              >
                <a-list-item-meta>
                  <template #title>{{
                    "remark" in item ? item.remark : item.name
                  }}</template>
                  <template #avatar>
                    <a-avatar :src="item.avatar" />
                  </template>
                  <template #description>{{ item.lastMessage }}</template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>

        <!-- 将右键菜单移到这里，作为列表区域的子元素 -->
        <a-dropdown
          :visible="contextMenuVisible"
          :trigger="[]"
          @visibleChange="handleContextMenuVisibleChange"
          :getPopupContainer="getContainer"
        >
          <template #overlay>
            <a-menu @click="handleContextMenuClick">
              <a-menu-item key="edit">修改信息</a-menu-item>
              <a-menu-item key="delete" danger>删除好友</a-menu-item>
            </a-menu>
          </template>
          <div
            :style="{
              position: 'absolute',
              top: contextMenuStyle.top,
              left: contextMenuStyle.left,
              height: '1px',
              width: '1px',
            }"
          ></div>
        </a-dropdown>
      </a-layout-sider>

      <!-- 右侧聊天内容区域 -->
      <a-layout-content class="chat-room-content">
        <div v-if="!currentContent" class="empty-content">
          <div class="welcome-container">
            <img
              src="../assets/images/imchat2.png"
              alt="IMCHAT"
              class="empty-logo"
            />
            <h2 class="welcome-text">欢迎使用 KSCN 的 IM 聊天室</h2>
          </div>
        </div>
        <component
          :is="getCurrentPanel"
          v-else
          :chatInfo="currentContent"
          @startChat="handleStartChat"
        />
      </a-layout-content>
    </a-layout>

    <!-- 添加删除确认对话框 -->
    <a-modal
      v-model:visible="deleteModalVisible"
      title="删除好友"
      @ok="confirmDelete"
      @cancel="cancelDelete"
      okText="确认"
      cancelText="取消"
    >
      <p>确定要删除该好友吗？此操作不可恢复。</p>
    </a-modal>

    <!-- 添加修改联系人信息的对话框 -->
    <a-modal
      v-model:visible="editModalVisible"
      title="修改联系人信息"
      @ok="handleEditSubmit"
      @cancel="handleEditCancel"
      okText="保存"
      cancelText="取消"
    >
      <a-form :model="editContactForm" layout="vertical">
        <a-form-item label="备注名">
          <a-input
            v-model:value="editContactForm.remark"
            placeholder="请输入备注名"
          />
        </a-form-item>
        <a-form-item label="分组">
          <a-input
            v-model:value="editContactForm.category"
            placeholder="请输入分组"
          />
        </a-form-item>
        <!-- 显示联系人基本信息（只读） -->
        <div class="contact-info">
          <p><strong>用户名：</strong>{{ selectedContact?.username }}</p>
          <p><strong>昵称：</strong>{{ selectedContact?.nickname }}</p>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, h, reactive, toRefs, nextTick } from "vue";
import { useAuthStore } from "@/store/auth";
import {
  getContactListApi,
  addContactApi,
  deleteContactApi,
  updateContactApi,
  sendFriendRequest,
} from "@/api/contact";
import { getUserInfoApi } from "@/api/user";
import {
  MessageOutlined,
  UserOutlined,
  StarOutlined,
  SettingOutlined,
  SmileOutlined,
  PaperClipOutlined,
  UserAddOutlined,
  UsergroupAddOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { Contact, ChatGroup } from "@/types/contact";
import { getGroupListApi, createGroupApi } from "@/api/group";
import { defineAsyncComponent, markRaw, type Component } from "vue";
import type { Ref } from "vue";

const queryParams = {
  username: "",
};

const getPopupContainer = (triggerNode: HTMLElement) => {
  return triggerNode.parentNode as HTMLElement;
};

const authStore = useAuthStore();
const activeMenu = ref(0);
const selectedKeys = ref([activeMenu.value.toString()]);
const activeChat = ref(0);
const searchText = ref("");

// 定义群聊的列表数据（先写死）
const groups = ref<ChatGroup[]>([]);

// 加载群聊列表的方法
const loadGroups = async () => {
  try {
    if (!authStore.user?.id) return;
    const response = await getGroupListApi(authStore.user.id);
    if (response.data.code === 200) {
      groups.value = response.data.data;
    }
  } catch (error) {
    console.error("加载群聊列表失败:", error);
  }
};

// 在 onMounted 中添加加载群聊列表
onMounted(() => {
  fetchContacts();
  loadGroups();
  if (chatGroups.value.length > 0) {
    currentContent.value = chatGroups.value[0];
  }
});

// 替换原来写死的群聊数据
const chatGroups = computed(() => {
  return groups.value.map(
    (group): ChatGroup => ({
      ...group,
      type: "group",
      lastMessage: group.lastMessage || "",
      maxMember: group.maxMember || 200,
      memberCount: group.memberCount || 0,
      ownerName: group.ownerName || "",
    })
  );
});

// 定义收藏的列表数据（先写死）
const favorites = [
  {
    name: "收藏1",
    avatar: "https://placekitten.com/54/54",
    lastMessage: "重要文件",
  },
];

// 设置菜单可选项
const menuItems = [
  { name: "群聊", icon: MessageOutlined },
  { name: "联系人", icon: UserOutlined },
  { name: "收藏", icon: StarOutlined },
];
const settingItem = {
  name: "设置",
  icon: SettingOutlined,
};

// 定义联系人类型，用于接收后端传来的数据
// interface Contact {
//   id: number; // 联系人关系表的 id
//   username: string;
//   avatar: string;
//   category: string;
//   remark: string;
//   status: number;
//   nickname: string;
//   friendId: number; // 修改为 friendId，与后端字段保持一致
// }

const data = reactive({
  addContactForm: {
    friendId: null,
    remark: "",
    category: "",
    applyReason: "",
  },
});

const { addContactForm } = toRefs(data);
const contacts = ref<Contact[]>([]);
const currentChat = ref<ListItem | null>(null);
const currentIcon = ref(UsergroupAddOutlined);
const loading = ref<boolean>(false);
const open = ref<boolean>(false);
const addGroupOpen = ref<boolean>(false);
const openInfo = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const showCard = ref<boolean>(false);
const showAddContactButton = ref<boolean>(false);

// 获取联系人数据列表
const fetchContacts = async () => {
  try {
    if (!authStore.user?.id) {
      console.warn("No user ID available");
      return;
    }
    const response = await getContactListApi(authStore.user.id);
    console.log("Contacts response data:", response.data.data); // 添加详细日志

    if (response.data.code === 200) {
      contacts.value = response.data.data;
    }
  } catch (error) {
    console.error("加载联系人列表失败:", error);
    message.error("加载联系人列表失败");
  }
};

// 自定义搜索框的输入函数
const onSearch = (searchValue: string) => {
  // 直接在输入时就更新搜索文本，不需要等待点击搜索按钮
};

const handleAddButtonClick = () => {
  if (activeMenu.value === 0) {
    openAddGroup();
  } else {
    openAddFriend();
  }
};
// 打开添加联系人的弹窗
const openAddFriend = () => {
  open.value = true;
};

//打开创建群聊的弹窗
const openAddGroup = () => {
  addGroupOpen.value = true;
};

const UserInfo = ref({
  id: null,
  username: "",
  nickname: "",
  avatar: "",
  phone: "",
  status: "",
  age: "",
});
//初始化用户信息
function initUserInfo() {
  UserInfo.value = {
    id: null,
    username: "",
    nickname: "",
    avatar: "",
    phone: "",
    status: "",
    age: "",
  };
}

const searchUser = ref("");
function searchUserInfo() {
  initUserInfo();
  if (searchUser.value !== "") {
    queryParams.username = searchUser.value;
    // 向后端端发送查询请求
    getUserInfoApi(queryParams).then((res) => {
      if (res.data.code === 200) {
        console.info(res.data.data[0]);
        UserInfo.value = res.data.data[0];
        showCard.value = true;

        // 如果查找的是当前用户自己
        if (UserInfo.value.username === authStore.user?.username) {
          showAddContactButton.value = false;
          return;
        }

        // 检查用户是否已经在联系人列表中
        const isAlreadyContact = contacts.value.some((contact) => {
          console.info(
            "contact.friendId：" +
              contact.friendId +
              " UserInfo.id：" +
              UserInfo.value.id
          );
          if (contact.friendId === UserInfo.value.id) {
            return true;
          }
        });

        // 如果已经是联系人，不显示添加按钮；否则显示
        showAddContactButton.value = !isAlreadyContact;
      }
    });
  } else {
    message.error("请输入用户名或手机号");
  }
}

const handleOk = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    open.value = false;
  }, 2000);
};

const handleCancel = () => {
  open.value = false;
  addGroupOpen.value = false;
  showAddContactButton.value = false;
  showCard.value = false;
  searchUser.value = "";
  initUserInfo();
};

// 显示添加联系人详情对话框
const showAddContact = () => {
  openInfo.value = true;
  open.value = false;
};

// 提交添加联系人表单
const handleSumbit = async () => {
  confirmLoading.value = true;
  if (!authStore.user?.id) {
    console.warn("No user ID available");
    return;
  }
  const requestData = {
    friendId: UserInfo.value.id,
    applyReason: addContactForm.value.applyReason,
    remark: addContactForm.value.remark,
    category: addContactForm.value.category,
  };

  try {
    await sendFriendRequest(authStore.user.id, requestData);
    message.success("好友请求已发送");
    openInfo.value = false;
  } catch (error) {
    message.error("发送好友请求失败");
  } finally {
    confirmLoading.value = false;
  }
};

// 组件挂载获取联系人列表
onMounted(async () => {
  // 如果没有用户信息，先检查认证状态
  if (!authStore.user) {
    await authStore.checkAuth();
  }
  await fetchContacts();
});
type ListItem = Contact | ChatGroup;
const selectedMenu = ref(0);

const currentList = ref<ListItem[]>([]);

// 事件处理器处理菜单项选择事件
const handleMenuSelect = async ({ key }: { key: string }) => {
  activeMenu.value = Number(key);
  activeChat.value = 0;

  switch (activeMenu.value) {
    case 0:
      await loadGroups();
      currentList.value = chatGroups.value;
      currentIcon.value = UsergroupAddOutlined;
      break;
    case 1:
      await fetchContacts();
      currentList.value = contacts.value;
      currentIcon.value = UserAddOutlined;
      break;
    case 2:
      currentList.value = chatGroups.value;
      break;
  }
};

// 根据当前菜单返回搜索框提示文字
const getSearchPlaceholder = computed(() => {
  switch (activeMenu.value) {
    case 0:
      return "搜索群聊";
    case 1:
      return "搜索联系人";
    case 2:
      return "搜索收藏";
    default:
      return "搜索";
  }
});

// 添加右键菜单相关的响应式量
const contextMenuVisible = ref(false);
const contextMenuStyle = ref({
  top: "0px",
  left: "0px",
});
const selectedContact = ref<Contact | null>(null);
const deleteModalVisible = ref(false);
const editModalVisible = ref(false);
const editContactForm = reactive({
  remark: "",
  category: "",
});

// 处理右键菜单
const handleContextMenu = (event: MouseEvent, contact: Contact) => {
  event.preventDefault();
  event.stopPropagation();

  const container = document.querySelector(".chat-room-list");
  if (!container) return;

  // 获取列表容器的位置信息
  const listRect = container.getBoundingClientRect();

  // 计算相对于列表容器的位置
  const relativeX = event.clientX - listRect.left;
  const relativeY = event.clientY - listRect.top;

  // 设置菜单位置
  contextMenuStyle.value = {
    top: `${relativeY}px`,
    left: `${relativeX}px`,
  };

  // 显示菜单
  contextMenuVisible.value = true;
  selectedContact.value = contact;
};

// 处理菜单显示状态变化
const handleContextMenuVisibleChange = (visible: boolean) => {
  if (!visible) {
    contextMenuVisible.value = false;
  }
};

// 点击其他地方关闭菜单
onMounted(() => {
  document.addEventListener("click", () => {
    contextMenuVisible.value = false;
  });
});

// 处理右键菜单点击
const handleContextMenuClick = ({ key }: { key: string }) => {
  contextMenuVisible.value = false;

  switch (key) {
    case "edit":
      if (selectedContact.value) {
        // 回显联系人信息
        editContactForm.remark = selectedContact.value.remark;
        editContactForm.category = selectedContact.value.category;
        editModalVisible.value = true;
      }
      break;
    case "delete":
      deleteModalVisible.value = true;
      break;
  }
};

// 确认删除联系人
const confirmDelete = async () => {
  if (!selectedContact.value || !authStore.user?.id) return;

  try {
    const response = await deleteContactApi(
      authStore.user.id,
      selectedContact.value.friendId
    );
    if (response.data.code === 200) {
      message.success("删除成功");
      // 重新获取联系人列表
      await fetchContacts();
    } else {
      message.error("删除失败");
    }
  } catch (error) {
    console.error("删除联系人失败:", error);
    message.error("删除失败，请稍后重试");
  }

  deleteModalVisible.value = false;
  selectedContact.value = null;
};

// 取消删除
const cancelDelete = () => {
  deleteModalVisible.value = false;
  selectedContact.value = null;
};

// 提交编辑方法
const handleEditSubmit = async () => {
  if (!selectedContact.value || !authStore.user?.id) return;

  try {
    const response = await updateContactApi(
      authStore.user.id,
      selectedContact.value.friendId,
      {
        remark: editContactForm.remark,
        category: editContactForm.category,
      }
    );

    if (response.data.code === 200) {
      message.success("修改成功");
      await fetchContacts();
      // 如果当前显示的是联系人列表，也更新它
      if (activeMenu.value === 1) {
        currentList.value = contacts.value;
      }
      editModalVisible.value = false;
      selectedContact.value = null;
    } else {
      message.error("修改失败");
    }
  } catch (error) {
    console.error("修改联系人信息失败:", error);
    message.error("修改失败，请稍后重试");
  }
};

// 添加取消编辑的方法
const handleEditCancel = () => {
  editModalVisible.value = false;
  selectedContact.value = null;
};

// 修改 listContainer 的类型定义
const listContainer = ref<HTMLElement>();

// 添加控制显示内容的变量
const showChat = computed(() => {
  // 如果菜单项是群聊则则显示聊天列表
  if (activeMenu.value === 0) {
    return true;
  } else {
    // 否则不显示
    return false;
  }
});
const currentContent = ref<Contact | ChatGroup | null>(null);

// 修改处理点事件方法
const handleItemClick = (item: ListItem, index: number) => {
  activeChat.value = index;
  currentContent.value = item;
  currentChat.value = item;
  // 点击时重置聊天面板状态
  showChatPanel.value = false;
};

// 处理开始聊天
const handleStartChat = () => {
  showChatPanel.value = true;
};

const createGroupForm = reactive({
  name: "",
  avatar: "",
  announcement: "",
  description: "",
  maxMembers: 200,
});

const contactSearchText = ref("");
const selectedContacts = ref<number[]>([]);

// 根据搜索文本过滤联系人
const filteredContacts = computed(() => {
  if (!contactSearchText.value) {
    return contacts.value;
  }
  return contacts.value.filter((contact) =>
    (contact.remark || contact.nickname)
      .toLowerCase()
      .includes(contactSearchText.value.toLowerCase())
  );
});

// 搜索联系人
const onSearchContact = (value: string) => {
  contactSearchText.value = value;
};

// 处理创建群聊
const handleCreateGroup = async () => {
  if (!createGroupForm.name) {
    message.error("请输入群聊名称");
    return;
  }
  if (selectedContacts.value.length < 2) {
    message.error("请至少选择两个联系人");
    return;
  }

  loading.value = true;

  try {
    createGroupForm.avatar =
      "https://api.dicebear.com/7.x/avataaars/svg?seed=4";
    const groupData = {
      ...createGroupForm,
      memberIds: selectedContacts.value,
    };
    if (!authStore.user?.id) return;
    const response = await createGroupApi(authStore.user.id, groupData);
    if (response.data.code === 200) {
      message.success("创建群聊成功");
      addGroupOpen.value = false;
      await loadGroups(); // 重新加载群聊列表
      // 重置表单
      createGroupForm.name = "";
      createGroupForm.announcement = "";
      selectedContacts.value = [];
    }
  } catch (error) {
    console.error("创建群聊失败:", error);
    message.error("创建群聊失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

// 添加一个状态来控制是否显示聊天面板
const showChatPanel = ref(false);

// 异步加载组件
const GroupChatPanel = defineAsyncComponent(
  () => import("@/components/GroupChatPanel.vue")
);

const PrivateChatPanel = defineAsyncComponent(
  () => import("@/components/PrivateChatPanel.vue")
);

const ContactPanel = defineAsyncComponent(
  () => import("@/components/ContactPanel.vue")
);

// 修改计算属性
const getCurrentPanel = computed(() => {
  if (!currentContent.value) return null;

  if (currentContent.value.type === "group") {
    return GroupChatPanel;
  }

  // 如果是联系人，根据 showChatPanel 状态决定显示哪面板
  return showChatPanel.value ? PrivateChatPanel : ContactPanel;
});

// 修改组件渲染时的类型判断
const getPanelProps = computed(() => {
  if (!currentContent.value) return null;
  return {
    chatInfo:
      currentContent.value.type === "group"
        ? (currentContent.value as ChatGroup)
        : (currentContent.value as Contact),
  };
});

// 定义计算属性来过滤列表
const filteredList = computed(() => {
  if (!searchText.value) return currentList.value;

  return currentList.value.filter((item) => {
    const searchTarget =
      "remark" in item
        ? item.remark || item.username // 联系人显示备注名或用户名
        : item.name; // 群组显示群名
    return searchTarget.toLowerCase().includes(searchText.value.toLowerCase());
  });
});

// 监听输入框的值变化
const handleSearchChange = (e: Event) => {
  const target = e.target as HTMLInputElement;
  searchText.value = target.value;
};

const getContainer = () => {
  return document.querySelector(".chat-room-list") || document.body;
};
</script>
<style scoped>
.chat-room-container {
  display: flex;
  height: calc(100vh - 64px); /* 减去顶部导航栏的高度 */
  padding: 24px;
  /* background: #f0f2f5; */
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/images/chatbg.png");
  background-size: cover;
}

.chat-room-box {
  display: flex;
  height: 80ch;
  max-width: 1000px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 左侧菜单样式 */
.chat-room-menu {
  height: 100%;
  /* background: #001529; */
  background: #ffffff;
}

.contact-introduce {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* 中间列表样式 */
.chat-room-list {
  position: relative;
  background: #fff;
  border-right: 1px solid #f0f0f0;
}

.list-header {
  display: flex;
  flex-direction: row;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.list-content {
  height: calc(100% - 73px);
  overflow-y: auto;
}

.chat-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-item:hover {
  background: #f5f5f5;
}

.chat-item.active {
  background: #e6f7ff;
}

/* 右侧聊天区域样式 */
.chat-room-content {
  display: flex;
  flex-direction: column;
  /* background: #fff; */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.chat-header {
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.chat-title {
  font-size: 16px;
  font-weight: 500;
}

.chat-messages {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f5f5f5;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 12px;
}

.message-self {
  flex-direction: row-reverse;
}

.message-content {
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  max-width: 60%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-self .message-content {
  background: #1890ff;
  color: #fff;
}

.chat-input-area {
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.toolbar {
  margin-bottom: 12px;
  color: #595959;
}

.toolbar .anticon {
  font-size: 20px;
  cursor: pointer;
}

.toolbar .anticon:hover {
  color: #1890ff;
}

.chat-input {
  margin-bottom: 12px;
}

.send-button {
  float: right;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 添加新的样式 */
.menu-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-top {
  flex-grow: 1;
}

.menu-bottom {
  border-top: 1px solid #f0f0f0;
}

/* 添加右键菜单关样式 */
.chat-item {
  user-select: none;
}

/* 确键菜单在最上层 */
.ant-dropdown {
  z-index: 1000;
}

.contact-info {
  margin-top: 16px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.contact-info p {
  margin-bottom: 8px;
}

.contact-info p:last-child {
  margin-bottom: 0;
}

/* 在 style 部分添加以下样式 */
.contact-select {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.contact-select-header {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.contact-select-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.contact-item {
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.contact-item:last-child {
  border-bottom: none;
}

:deep(.ant-checkbox-wrapper) {
  width: 100%;
  display: flex;
  align-items: center;
}

:deep(.ant-space) {
  margin-left: 8px;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: rgba(222, 222, 222, 0.8);
  backdrop-filter: blur(8px);
}

.empty-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-menu-light {
  color: rgba(0, 86, 139, 0.88);
  background: #b9b8b8;
}

.menu-top {
  background: #b9b8b8;
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.welcome-text {
  font-size: 28px;
  font-weight: 600;
  color: #1890ff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
  background: linear-gradient(45deg, #1890ff, #6dbcf4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
